<template>
  <div class="proc-node-layout">
    <div class="node" :class="{'node-line': index < props.records.length - 1}" v-for="(node, index) in props.records" :key="index">
      <div class="icon">
        <img class="icon-img" :src="node.icon" />
        <img class="tag" v-if="node.tag != null" :src="node.tag" />
      </div>
      <div class="body">
        <div class="header">
          <div class="content">
            <div class="title">{{node.nodeName}}</div>
            <div class="describe">{{node.describe}}</div>
          </div>
          <div class="time">{{node.handleTime}}</div>
        </div>
        <div class="handlers" v-if="node.handlers && node.handlers.length > 0">
          <div class="user" v-for="user in node.handlers">
            <img class="avatar" :src="userIcon" />
            <div class="name">{{user.name}}</div>
          </div>
        </div>
        <div class="opinion" v-if="node.handleOpinion != null && node.handleOpinion !== ''">{{node.handleOpinion}}</div>
      </div>
    </div>
<!--    <el-timeline style="width: 100%">
      <el-timeline-item>

      </el-timeline-item>
    </el-timeline>-->
  </div>

</template>

<script setup>
import userIcon from "@/assets/images/bpm/user.png"
import checkIcon from "@/assets/images/bpm/check.png"

import {START, APPROVER, NOTIFY} from "@/components/EasyProcess/config/nodeType"

import {computed, getCurrentInstance, onMounted, ref, watch} from "vue";
import {getNodeIcon, getTag} from "@/views/bpm/components/BpmIcon";

const { proxy } = getCurrentInstance();

const props = defineProps({
  records: {
    type: Array,
  }
});

let nowHandlerList = []

watch(
    () => props.records,
    (val) => {
      handleRecords()
    }
);

onMounted(async () => {
  handleRecords()
});

function handleRecords() {
  if (props.records != null) {
    props.records.forEach(node => {
      node.describe = generateDescribe(node)
      node.icon = getNodeIcon(node.nodeType)
      node.tag = getTag(node.status, node.handleStatus, node.handleResult)
    })
  }

}

function generateDescribe(record) {

  let handlerNum = 0
  if (record.handlers) {
    handlerNum = record.handlers.length
  }

  if (record.nodeType === START) {
    if (record.status === '1') {
      return record.handlerName + "(待提交)"
    } else {
      return record.handlerName + "发起的审批"
    }

  }

  if (record.nodeType === NOTIFY) {
    return "抄送" + handlerNum + "人"
  }

  if (record.nodeType === APPROVER) {
    let text = ""
    if (record.handlerName != null) {
      text = record.handlerName
    } else {
      if (record.handleModel === 1) {
        text = handlerNum + "人依次审批"
      } else if (record.handleModel === 2) {
        text = handlerNum + "人会签"
      } else if (record.handleModel === 3) {
        text = handlerNum + "人或签"
      }
    }
    if (record.status === '1') {
      text += '(审批中)'
    } else if (record.status === '2') {
      if (record.handleResult === '3') {
        text += '(加签)'
      } else if (record.handleResult === '4') {
        text += '(转交)'
      } else if (record.handleResult === '5') {
        text += '(退回)'
      } else if (record.handleResult === '6') {
        text += '(撤消)'
      }
    }
    return text
  }

  return ""
}
</script>

<style scoped lang="scss">
.proc-node-layout {
  width: 100%;
  background-color: #FFFFFF;

  .node {
    width: 100%;
    padding-bottom: 40px;
    position: relative;
    display: flex;
    flex-direction: row;


    .icon {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      position: relative;
      border: 4px solid #FFFFFF;
      border-radius: 10px;
      background-color: #409EFF;

      .icon-img {
        width: 25px;
        height: 25px;

      }

      .tag {
        position: absolute;
        right: -5px;
        bottom: -5px;
        width: 15px;
        height: 15px;
        border: 1px solid #FFFFFF;
        border-radius: 10px;
        background-color: #FFFFFF;
      }
    }
    .body {
      flex: 1;
      padding: 4px;
      overflow: hidden;

      .header {
        flex: 1;
        display: flex;
        flex-direction: row;
        width: 100%;

        .content {
          flex: 1;
          .title {
            font-size: 14px;
            font-weight: bold;
            color: #303133;
          }
          .describe {
            margin-top: 3px;
            font-size: 12px;
            color: #606266;
          }
        }
        .time {
          width: 130px;
          font-size: 14px;
          color: #606266;
        }
      }

      .handlers {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 10px;

        .user {
          width: 60px;
          margin: 10px;
          text-align: center;

          .avatar {
            width: 30px;
            height: 30px;
            background-color: #409EFF;
            border-radius: 5px;
          }
          .name {
            font-size: 14px;
            color: #303133;
          }
        }
      }

      .opinion {
        width: 100%;
        margin-top: 10px;
        border-radius: 5px;
        padding: 10px;
        background-color: #F2F3F5;
        font-size: 14px;
        color: #303133;
        word-wrap: break-word;
        white-space: normal;
      }
    }


  }

  .node-line {
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      //z-index: -1;
      margin-left: 23px;
      width: 3px;
      height: 100%;
      background-color: #cacaca
    }
  }

}
</style>